<template>
	<view class="u-search">
		<view class="u-content" style="background-color: rgb(242, 242, 242); border-radius: 55px; height: 35px;">
			<view class="u-icon-wrap">
				<view class="u-icon u-clear-icon u-icon--right">
					<text data-v-6e20bb40="" class="u-icon__icon uicon-search u-iconfont" style="font-size: 16px; font-weight: normal; top: 0px; color: rgb(96, 98, 102);"></text>
				</view>
			</view>
			<uni-input class="u-input" style="text-align: left; color: rgb(96, 98, 102); background-color: rgb(242, 242, 242);">
				<view class="uni-input-wrapper">
					<view class="uni-input-placeholder u-placeholder-class" style="color: rgb(144, 147, 153);">请输入搜索条件</view>
					<form action="" class="uni-input-form"><input maxlength="-1" step="" enterkeyhint="search" autocomplete="off" type="search" class="uni-input-input" v-model="searchword"/></form>
				</view>
			</uni-input>
		</view>
		<view class="u-action u-action-active">
			<text class="searchBtn">搜索</text>
			<text v-if="showOper=='export'" class="filterBtn" @click="showExport=true">导出</text>
			<text v-else-if="showOper=='add'" class="filterBtn blue" @click="addPage">新增</text>
		</view>
		<u-popup v-model="showExport" :mode="searchMode">
			<u-form>
				<u-form-item label-width="150" :label-position="labelPosition" label="任务时限" prop="time">
					<u-input type="picker" @click="timerShow=true" v-model="params.timer" placeholder="请选择时限"></u-input>
				</u-form-item>
				<u-form-item label-width="150" :label-position="labelPosition" label="关联事务" prop="shiwu">
					<u-input :border="border" type="select" :select-open="actionSheetShow" v-model="params.shiwu" placeholder="请选择关联事务" @click="actionSheetShow = true"></u-input>
				</u-form-item>
				<view class="exportOper">
					<u-button type="info" size="medium" @click="showExport=false">取消</u-button>
					<u-button type="primary" size="medium">确认导出</u-button>
				</view>
			</u-form>
		</u-popup>
		<u-picker mode="time" v-model="timerShow" :params="timeType" @confirm="timerConfirm"></u-picker>
		<u-action-sheet :list="actionSheetList" v-model="actionSheetShow" @click="actionSheetCallback"></u-action-sheet>
	</view>
</template>

<script>
export default {
	name: 'searchBox',
	props:{
		showOper:{
			type:String,
			default:'export'
		}
	},
	data() {
		return {
			searchword:'',
			showExport:false,
			searchMode:'top',
			labelPosition: 'left',
			timerShow:false,
			border:false,
			timeType: {
				year: true,
				month: true,
				day: true,
				hour: true,
				minute: true,
				second: true,
			},
			params:{
				timer:'',
				shiwu:''
			},
			actionSheetList: [
				{
					text: '文件名'
				},
				{
					text: '会议记录'
				},
				{
					text: '领导指示'
				}
			],
			actionSheetShow: false,
		};
	},
	methods:{
		timerConfirm(e){},
		actionSheetCallback(e){},
		addPage(){
			this.$emit('add');
		}
	}
};
</script>

<style lang="scss" scoped>
@charset "UTF-8";
.u-form{
	padding:20rpx;
	.exportOper{
		margin-top:20rpx;
		text-align: center;
		button{
			margin: 20rpx;
		}
	}
}
.u-search {
	width:100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	flex: 1;
}
.u-content {
	margin: 20rpx;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-direction: row;
	flex-direction: row;

	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	padding: 0 0 0 16rpx;
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	flex: 1;
}
.u-clear-icon {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-direction: row;
	flex-direction: row;

	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
}
.u-input {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	flex: 1;
	font-size: 15px;
	line-height: 1;
	margin: 0 5px;
	color: #909399;
}
.u-close-wrap {
	width: 22px;
	height: 100%;

	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-direction: row;
	flex-direction: row;

	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	border-radius: 50%;
}
.u-placeholder-class {
	color: #909399;
}
.u-action {
	font-size: 26rpx;
	color: #303133;
	width: 0;
	overflow: hidden;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	white-space: nowrap;
	&.u-action-active {
		width: 160rpx;
	}
	text {
		display: inline-block;
		margin-left: 10rpx;
	}
	.filterBtn{
		margin-left:20rpx;
	}
}
.blue{
	color: #2979FF;
}
</style>
